<template>
    <div class="feige">
        <div class="top">
            <i class="el-icon-arrow-left"></i>
            <el-input change="" placeholder="重返1991" prefix-icon="el-icon-search" v-model="keyword"></el-input>
            <span>搜索</span>
        </div>
        <div class="middle">
            <div class="mid-box">
                <div class="mid-box-top">
                    <h1>搜索推荐</h1>
                    <i class="el-icon-refresh"></i>
                </div>
                <div class="mid-box-bottom">
                    <div v-for="item in tuijian" :key="item.id" >
                        <el-button class="button" type="info" round style="padding:5px;margin:5px;">{{item.text}}</el-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <h1>全网热搜</h1>
            <div class="box">

                <div class="item" v-for="item in bookList" :key="item.id">
                    <div class="left">
                        {{  item.id}}
                    </div>
                    <div class="right">
                        <div class="le">
                            <img :src="item.imgUrl" alt="">
                        </div>
                        <div class="ri">
                            <div class="ri-top">
                                {{ item.name }}
                            </div>
                            <div class="ri-bottom">
                                {{ item.type }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {Books_Data} from '@/mock/mockApi/book.js';
import {Keyword_Data} from '@/mock/mockApi/keywords.js'
    export default {
        data(){
            return{
                keyword:'',
                bookList:[],
                tuijian:[],
            }
        },
        mounted(){
            this.getBookData();
            this.getKeywords();
        },
        methods:{
            async getBookData(){
                const result = await Books_Data({
                    method:'get',
                    url:'/home/book'
                });
                console.log(result);
                this.bookList = result.data.data;
            },
            async getKeywords(){
                const result = await Keyword_Data({
                    method:'get',
                    url:'/home/keywords'
                });
                console.log(result);
                this.tuijian = result.data.data;
            }
        }
    }
</script>

<style lang="scss" scoped>
.feige{
    width:94.5%;
    padding:10px;
    background: rgba(252, 236, 204, 1);
    .top{
        width:100%;
        height:34px;
        display:flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom:22px;
        i{
            font-size:30px;
        }
        /deep/.el-input{
            width:250px
        }
        /deep/.el-input__inner{
            border-radius:20px;
        }
        span{
            font-size: 13px;
            font-weight: 500;
            letter-spacing: 0px;
            color: rgba(59, 59, 59, 1);
            text-align: left;
        }
    }
    .middle{
        width:100%;
        height:122px;
        display:flex;
        justify-content: center;
        align-items: center;
        .mid-box{
            width: 343px;
            height: 122px;
            background: rgba(190, 145, 97, 1);
            box-shadow: 0px 0px 0px 0px rgba(74, 17, 25, 0.1), 0px 9px 20px 0px rgba(74, 17, 25, 0.1), 0px 36px 36px 0px rgba(74, 17, 25, 0.09), 0px 82px 49px 0px rgba(74, 17, 25, 0.05), 0px 146px 58px 0px rgba(74, 17, 25, 0.01), 0px 228px 64px 0px rgba(74, 17, 25, 0);
            border-radius: 20px 20px, 0px, 0px;
            .mid-box-top{
                width:94%;
                height:14px;
                padding:10px;
                display:flex;
                justify-content: space-between;
                align-items: center;
                h1{
                    font-size: 16px;
                    font-weight: 500;
                    letter-spacing: 0px;
                    line-height: 34px;
                    color: rgba(255, 255, 255, 1);
                    text-align: left;
                    vertical-align: top;
                }
                i{
                    font-size:23px;
                    color: rgba(255, 255, 255, 1);
                }
            }
            .mid-box-bottom{
                width:100%;
                display:flex;
                flex-wrap: wrap;
                // div{
                //     margin:10px;
                // }
                /deep/.el-button{
                    border:none;
                    background: rgba(245, 233, 213, 1);
                    font-size: 12px;
                    font-weight: 500;
                    letter-spacing: 0px;
                    line-height: 17.38px;
                    color: rgba(115, 115, 115, 1);
                    text-align: left;
                    vertical-align: top;
                }
            }
        }
    }
    .bottom{
        width:100%;
        h1{
            font-size: 16px;
            font-weight: 700;
            letter-spacing: 0px;
            line-height: 42px;
            color: rgba(0, 0, 0, 1);
            text-align: left;
            vertical-align: top;
        }
        .box{
            width:100%;
            display:flex;
            justify-content: space-between;
            flex-wrap: wrap;
            .item{
                display:flex;
                width:50%;
                height:70px;
                margin-bottom:20px;
                .left{
                    width:20px;
                    height:100%;
                    font-size: 12px;
                    font-weight: 700;
                    letter-spacing: 0px;
                }
                .right{
                    width:300px;
                    display:flex;
                    height:70px;
                    .le{
                        width: 50px;
                        height: 66.67px;
                        img{
                            width:100%;
                            height:100%;
                            border-radius: 5px;
                        }
                    }
                    .ri{
                        width: 73px;
                        height:100%;
                        display:flex;
                        flex-direction: column;
                        align-items: flex-start;
                        justify-content: space-between;
                        margin-left:10px;
                        .ri-top{
                            font-size: 12px;
                            font-weight: 700;
                            letter-spacing: 0px;
                            line-height: 17.38px;
                            color: rgba(59, 59, 59, 1);
                            text-align: left;
                            vertical-align: top;
                        }
                        .ri-bottom{
                            font-size: 12px;
                            font-weight: 400;
                            letter-spacing: 0px;
                            line-height: 17.38px;
                            color: rgba(168, 168, 168, 1);
                            text-align: left;
                            vertical-align: top;
                        }
                    }
                }
            }
        }
    }
}
</style>